<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-23 22:53:55
-->
<template>
    <div class="typenav">
        <ul>
            <li v-for="(item, index) in typeitem" :key="index">
                <span :class="{active : currentIndex === index}" @click="changeIndex(item,index)">{{ item.name }}</span>
            </li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'
defineProps({
    typeitem: {
        type: Array,
        default: []
    }
})
let currentIndex = ref(0)

const emit = defineEmits(['typeItemClick'])

function changeIndex(item,index) {
    currentIndex.value = index
    //触发自定义事件
    emit('typeItemClick',item)
}
</script>

<style lang="scss" scoped>
.typenav {
    ul {
        display: flex;
        flex-wrap: wrap;
        // width: 270px;
        li {
            color: #666666;
            height: 30px;
            line-height: 30px;
            padding: 0 8px;
            margin-right: 10px;
            cursor: pointer;

            span {}
        }
    }
}
.active {
    color: black;
    font-weight: 700;
}
</style>